<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import _ from 'lodash'
import Condition from '@/components/Condition/index.vue'
import FormModal from './components/formModal.vue'
import rule from './components/rule.vue'
import { aiMessageCardList, aiMessageCardSave, aiMessageCardUpdate } from '@/api/aitemplate'
import { message } from 'ant-design-vue'

defineOptions({
  name: 'ai模版'
})

const condition = ref([])

const pagination = reactive({
  current: 1,
  total: 0,
  pageSize: 10,
  showSizeChanger: true,
  pageSizeOptions: ['10', '20', '50', '100']
})

const columns = [
  {
    title: '序号',
    dataIndex: 'no',
    key: 'no',
    align: 'left',
    width: '50px'
  },
  {
    title: '模板id',
    dataIndex: 'id',
    key: 'id',
    align: 'left'
  },
  {
    title: '功能分类',
    dataIndex: 'moduleCategory',
    key: 'moduleCategory',
    align: 'left'
  },
  {
    title: '模板名称',
    dataIndex: 'templateName',
    key: 'templateName',
    align: 'left'
  },
  {
    title: '模板code',
    dataIndex: 'templateCode',
    key: 'templateCode',
    align: 'left'
  },
  {
    title: 'vip鉴权',
    dataIndex: 'ifVipAuth',
    key: 'ifVipAuth',
    align: 'left'
  },
  {
    title: '用途',
    dataIndex: 'templateType',
    key: 'templateType',
    align: 'left'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    align: 'left',
    width: '200px'
  }
]

const loading = ref(false)
const List = ref([])

onMounted(() => {
  getList()
})

const getList = () => {
  const { current, pageSize } = pagination
  loading.value = true
  const params = {
    page: current,
    limit: pageSize
  }
  aiMessageCardList(params)
    .then((res) => {
      console.log(res)
      if (res.data.total > 0 && !res.data.list.length) {
        pagination.current = pagination.current - 1
        getList()
      } else {
        pagination.total = res.data.total
        res.data.list.map((v) => {
          v.cardButtons = JSON.parse(v.cardButtons)
          v.cardFormData = JSON.parse(v.cardFormData)
        })
        List.value = res.data.list
      }
    })
    .finally(() => {
      loading.value = false
    })
}

const paginationChange = (p) => {
  Object.assign(pagination, p)
  getList()
}

const formRef = ref(null)
const modalShow = () => {
  formRef.value?.init()
}

const modalShow2 = (record) => {
  const obj = _.cloneDeep(record)
  //   obj.cardButtons = JSON.parse(obj.cardButtons)
  //   obj.cardFormData = JSON.parse(obj.cardFormData)
  formRef.value?.init(obj)
}

const formConfirm = ({ data, success, fail, type }) => {
  const { cardFormData, cardButtons } = data
  const params = {
    ...data,
    cardFormData: JSON.stringify(cardFormData),
    cardButtons: JSON.stringify(cardButtons)
  }
  if (type === 'save') {
    aiMessageCardSave(params).then((res) => {
      message.success('新建成功')
      success()
      getList()
    })
  } else {
    aiMessageCardUpdate(params).then((res) => {
      message.success('编辑成功')
      success()
      getList()
    })
  }
}

const ruleRef = ref(null)

const modalShow3 = (record) => {
  const obj = _.cloneDeep(record)
  //   obj.cardButtons = JSON.parse(obj.cardButtons)
  //   obj.cardFormData = JSON.parse(obj.cardFormData)
  console.log(obj)
  ruleRef.value.init(obj)
}

const ruleConfirm = ({ data, success, fail }) => {
  console.log(data, success, fail)
  const Data = _.cloneDeep(data)
  const { cardFormData, cardButtons } = Data
  const params = {
    ...Data,
    cardFormData: JSON.stringify(cardFormData),
    cardButtons: JSON.stringify(cardButtons)
  }

  aiMessageCardUpdate(params)
    .then((res) => {
      message.success('提交成功')
      success()
      getList()
      // modal3.loading = false
      // modal3.open = false
    })
    .catch((e) => {
      fail()
      // modal3.loading = false
      console.log(e)
    })
}
</script>

<template>
  <a-card style="width: 100%">
    <div class="header">
      <a-space class="left" direction="vertical" :size="[8, 12]">
        <Condition :condition="condition" @search="onSearch" @reset="conditionReset"></Condition>
      </a-space>
      <a-space class="right" direction="vertical" :size="[8, 12]">
        <a-button type="primary" @click="modalShow">新建模板</a-button>
      </a-space>
    </div>
    <div class="main">
      <a-table
        class="table"
        size="small"
        :loading="loading"
        :dataSource="List"
        :columns="columns"
        :pagination="pagination"
        @change="paginationChange"
        :sticky="{ offsetHeader: 0 }"
      >
        <template #bodyCell="{ column, text, index, record }">
          <template v-if="column.dataIndex === 'no'">
            {{ (pagination.current - 1) * pagination.pageSize + index + 1 }}
          </template>
          <template v-else-if="column.dataIndex === 'ifVipAuth'">
            {{ record[column.dataIndex] ? '是' : '否' }}
          </template>
          <!-- <template v-else-if="column.dataIndex === 'managePath'">
            <div class="tags" v-if="record[column.dataIndex]">
              <a-tag
                type="parmary"
                :title="item"
                v-for="(item, i) in record[column.dataIndex].split(', ')"
                :key="i"
                >{{ item }}</a-tag
              >
            </div>
          </template>
          <template v-else-if="column.dataIndex === 'createTime'">
            {{ timeFilter(record[column.dataIndex]) }}
          </template> -->
          <template v-else-if="column.dataIndex === 'action'">
            <a-button type="link" @click="modalShow2(record)">查看详情</a-button>
            <a-button v-if="record.cardFormData.length" type="link" @click="modalShow3(record)"
              >设置规则</a-button
            >
            <a-button
              type="link"
              @click="delForm(record)"
              :disabled="record.managePath ? true : false"
              >删除模板</a-button
            >
          </template>
          <template v-else>
            {{ text }}
          </template>
        </template>
      </a-table>
    </div>
    <rule ref="ruleRef" @onConfirm="ruleConfirm"></rule>
    <form-modal ref="formRef" @onConfirm="formConfirm"></form-modal>
  </a-card>
</template>

<style scoped lang="less">
.header {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .left {
    ::v-deep(.ant-space-item) {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .title {
      font-size: 14px;
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 400;
      color: #4e5969;
      line-height: 32px;
    }
  }
  .right {
    ::v-deep(.ant-space-item) {
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
    }
  }
}
.main {
  flex: 1 1 auto;
  margin-top: 16px;
  overflow: hidden auto;
  :deep(.ant-table-wrapper) {
    .ant-table-cell {
      p {
        white-space: normal;
        margin-bottom: 0;
        .configuration {
          color: #3491fa;
          background: #e8f7ff;
          border-color: #3491fa;
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 100%;
          margin-top: 10px;
          &:nth-child(1) {
            margin-top: 0;
          }
        }
        .success {
          color: #00b42a;
          background: #e8ffea;
          border-color: #00b42a;
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 100%;
          margin-top: 10px;
          &:nth-child(1) {
            margin-top: 0;
          }
        }
        .groupTag {
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 100%;
          margin-top: 10px;
          margin-right: 10px;
          &:nth-child(1) {
            margin-top: 0;
          }
        }
      }
    }
  }
}
</style>
